<template>
<!-- 人员发展 -->
  <div class="morning-container">
    <!-- 无趋势图 - 晨会 -->
    <person-info v-show="flag === 'morning'" ref="personInfoRef" @date="getDate" />
    <!-- 无趋势图 - 夕会 -->
    <person-info-evening v-show="flag === 'evening'" ref="personInfoRefEvening" />
    <!-- 人员列表 -->
    <person-list :list="personList" :type="type" :dayId="dayId" :flag="flag" />
  </div>
</template>

<script>
import personInfo from '@/views/components/publicline/board/personInfo.vue'
import personInfoEvening from '@/views/components/publicline/board/personInfoEvening.vue'
import personList from '@/views/components/publicline/board/personList.vue'

import { kpiPeopleDetail, kpiEveningPerson } from '@/api/publicline/board.js'
import { Toast } from 'vant'

export default {
  components: { personInfo, personInfoEvening, personList },
  data() {
    return {
      personList: [],
      type: '',
      dayId: '',
      flag: '',
      isShowLine: false
    }
  },
  created() {
    this.type = this.$route.query.type
    this.dayId = this.$route.query.dayId || ''
    this.flag = this.$route.query.flag || ''
  },
  mounted() {
    if(this.flag === 'evening') {
      this.$refs.personInfoRefEvening.handleData(this.$route.query.realTime, this.type, this.$route.query.value, this.$route.query.mvalue)
      this.getKpiEveningDetail()
    } else {
      this.$refs.personInfoRef.getAccountDate(this.dayId)
      this.$refs.personInfoRef.handleData(this.type, this.$route.query.value, this.$route.query.mvalue, this.$route.query.hb)
      this.getKpiPeopleDetail(this.dayId)
    }
  },
  beforeDestroy() {
    Toast.clear()
  },
  methods: {
    getDate(val) {
      this.dayId = val
      this.getKpiPeopleDetail(val)
    },
    // 获取晨会人员指标
    async getKpiPeopleDetail(dayId) {
      Toast({
        type:'loading',
        duration: 0,
        message: '正在加载',
        forbidClick: 'true'
      })
      const params = {
        gridId: this.$gridId,
        type: this.type,
        dayId,
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await kpiPeopleDetail(params)
      const { result, success } = res
      if (success) {
        this.personList = result
        Toast.clear()
      }
    },
    // 获取夕会人员指标
    async getKpiEveningDetail() {
      Toast({
        type:'loading',
        duration: 0,
        message: '正在加载',
        forbidClick: 'true'
      })
      const params = {
        gridId: this.$gridId,
        type: this.type,
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await kpiEveningPerson(params)
      const { result, success } = res
      if (success) {
        this.personList = result
        Toast.clear()
      }
    },
  }
}
</script>
<style lang="less" scoped>
.morning-container {
  /deep/ .personal-detail {
    background: #FFFFFF;
    box-shadow: 0 2px 4px 1px #f3f7fa;
    border-radius: 6px;
    margin: 12px 8px 6px;

    .detail-info {
      padding: 4px 16px 6px 34px;
      .title {
        margin-top: 4px;
        color: #333;
      }
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .value-title .title::before {
        content: '';
        width: 6px;
        height: 6px;
        border: 1px solid #4d98ff;
        display: inline-block;
        border-radius: 4px;
        margin-right: 8px;
        margin-left: -12px;
      }
      .sub-title {
        font-size: 12px;
        color: #999;
      }
      .value {
        padding-left: 8px;
        font-size: 20px;
        color: #4D98FF;
      }
      .unit {
        font-size: 14px;
      }
      .percent {
        padding-left: 8px;
      }
      .up {
        color: #FF6024;
      }
      .down {
        color: #40BB3F;
      }
      img {
        width: 11px;
      }
    }
  }
}
</style>